<template>
    <div class="songlist-detail">
        <div class="cover" ref="cover" :style="bgImage">
            <div class="mask"></div>
        </div>
        <div class="name van-ellipsis">{{title}}</div>
        <div class="back iconfont icon-fanhui" @click="back"></div>
        <div class="layer" ref="layer"></div>
        <div class="song-wrapper" ref="songWrapper">
            <scroll :data="songList" @scroll="scroll" ref="scroll" :probeType="probeType" :listenScroll="listenScroll">
                <ul class="song-list" v-if="songList.length">
                    <li class="item-song" v-for="(item,index) in songList" :key="item.id" @click="getSong(item,index)">
                        <div class="index">{{index + 1}}</div>
                        <div class="song-info">
                            <p class="song-name">{{item.name}}</p>
                            <p class="singer-name">{{item.ar[0].name}}</p>
                        </div>
                    </li>
                </ul>
            </scroll>
            <loading v-if="!songList.length"></loading>
        </div>
    </div>
</template>

<script>
import { getSonglistDetail } from 'api/api'
import Scroll from 'components/scroll/scroll'
import { mapMutations, mapActions, mapGetters} from 'vuex'
import { playerMixin } from 'common/js/mixin'
import Loading from 'components/loading/loading'
export default {
    name: '',
    mixins: [playerMixin],
    data() {
        return {
            listenScroll: true,
            probeType: 3,
            songList: [],
            bgImage: {},
            title: ''
        }
    },
    mounted() {
        this.imageHeight = this.$refs.cover.clientHeight
        this._getSonglistDetail()
        this.setCover()      
    },
    methods: {
        _getSonglistDetail() {
            let id = this.$route.query.id
            getSonglistDetail({id}).then(res=> {
                this.songList = res.playlist.tracks
                this.songList = this.songList.length > 100 ? this.songList.slice(0,100) : this.songList
            })
        },
        getSong(item,index) {
            let id = this.songList[index].id
            let list = this.songList
            this.setPlaylist({id,list,index})
            this.getSongSource()
        },
        scroll(pos) {
            let scale = 1
            let maxScroll = Math.max(-this.imageHeight + 50, pos.y)
            this.$refs.layer.style['transform'] = `translate3d(0,${maxScroll}px,0)`
            if(pos.y < (-this.imageHeight + 50)) {
                this.$refs.cover.style.height = `50px`
                this.$refs.cover.style.paddingBottom = `0`
                this.$refs.cover.style.zIndex = `10`
            }else {
                this.$refs.cover.style.height = `0`
                this.$refs.cover.style.paddingBottom = `70%`
                this.$refs.cover.style.zIndex = `0`
            }
            if(pos.y > 0) {
                scale += pos.y / this.imageHeight
            }
            this.$refs.cover.style['transform'] = `scale(${scale})`
        },
        setCover() {
            let cover = this.$route.query.cover
            this.title = this.$route.query.title
            this.bgImage = {
                'background':`url(${cover})`,
                'background-size': 'cover'
            }
            console.log(this.imageHeight)
            this.$refs.songWrapper.style.top = `${this.imageHeight}px`
        },
        back() {
            this.$router.back()
        },
        handlePlaylist(list) {
            if(list.length) {
                this.$refs.songWrapper.style.bottom = `60px`
                this.$refs.scroll.refresh()
            }
        },
        ...mapActions({
            setPlaylist: 'getCurrentSong',
            getSongSource: 'getSongSource'
        })
    },
    components: {
        Scroll,
        Loading
    }
}
</script>

<style lang="less" scoped>
    .songlist-detail{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        .cover{
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 70%;
            .mask{
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background: rgba(0,0,0,.3);
            }
        }
        .name{
            z-index: 20;
            position: absolute;
            top: 15px;
            left: 50%;
            width: 60%;
            transform:translate3d(-50%,0,0);
            color: #fff;
            font-size: 16px;
        }
        .back{
            z-index: 20;
            position: absolute;
            top: 17px;
            left: 20px;
            color: #fff;
            font-size: 16px;
            color: #fff;
        }
        .layer{
            position: relative;
            height: 100%;
            background: #fff;
        }
        .song-wrapper{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            .song-list{
                padding: 20px 20px 0;
                .item-song{
                    display: flex;
                    align-items: center;
                    padding-bottom: 20px;
                    .index{
                        flex: 0 0 30px;
                        font-size: 16px;
                        width: 30px;
                    }
                    .song-info{
                        flex: 1;
                        .song-name{
                            margin-bottom: 4px;
                            font-size: 16px;
                        }
                        .singer-name{
                            font-size: 12px;
                            color: #999;
                        }
                    }

                }
            }
        }
    }
</style>